<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>忘记密码</title>
</head>
<style>
	html {
		height: 100%;
		margin: 0;
		background-image: url("{{ url_for('static', filename='img/login.jpg') }}");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}  
	  
	.container {  
	    max-width: 400px;
        padding: 20px;
	    background-color: #fff;  
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
	    border-radius: 5px;
        margin: 180px auto auto;
    }
	  
	h1 {  
	    text-align: center;  
	}  
	  
	p {  
	    margin-bottom: 15px;  
	}  
	  
	.form-group {  
	    margin-bottom: 15px;  
	}  
	  
	label {  
	    display: block;  
	    margin-bottom: 5px;  
	}  
	  
	input[type="email"] {  
	    border-radius: 3px;  
	    border: 1px solid #ccc;  
		padding: 10px; /* 表单元素的内边距 */
		width: 100%;  
		box-sizing: border-box; /* 确保宽度包含内边距 */ 
	}  
	  
	button[type="submit"] {  
	    width: 100%;  
	    padding: 10px;  
	    background-color: #4CAF50;  
	    color: white;  
	    border: none;  
	    border-radius: 3px;  
	    cursor: pointer;  
	}  
	  
	button[type="submit"]:hover {  
	    background-color: #45a049;  
	}
</style>
<body>  
  
    <div class="container">  
  
        <h1>忘记密码</h1>  
  
        <p>请输入您注册时使用的电子邮件地址，我们将发送重置密码的链接到您的邮箱。</p>  
  
        <form id="forgotPasswordForm" action="/forgot-password" method="post">  
  
            <div class="form-group">  
  
                <label for="email">电子邮件:</label>  
  
                <input type="email" id="email" name="email" required>  
  
            </div>  
  
            <button type="submit">发送重置链接</button>

            <div style="text-align: right;">
                <a href="/user/loginPage" >返回登录</a>
            </div>
  
        </form>  
  
        <!-- 用于显示成功消息的div -->  
        <div id="successMessage" style="display: none; color: green; margin-top: 10px;">发送成功！正在跳转到登录页面...</div>  
  
    </div>  
  
    <script>  
        // 监听表单提交事件  
        document.getElementById('forgotPasswordForm').addEventListener('submit', function(event) {  
            // 阻止表单默认的提交行为  
            event.preventDefault();  
  
            // 这里可以添加AJAX请求到服务器处理表单数据，发送重置邮件等  
            // 但出于示例目的，我们直接显示成功消息并跳转到登录页面  
  
            // 显示成功消息  
            document.getElementById('successMessage').style.display = 'block';  
  
            // 设置定时器，在一段时间后跳转到登录页面  
            setTimeout(function() {  
                window.location.href = '登录.html'; // 假设登录页面名为“登录.html”  
            }, 2000); // 2秒后跳转  
        });  
    </script>  
  
</body> 
</html>